<template>
  <view class="nav-custom">
    <shopro-navbar
      :isHeight="false"
      :background="bg"
      :is-back="false"
      :placeholder="false"
    >
      <view slot="content" class="title-slot" :class="max ? 'more' : 'more'">
        <view class="title" :class="max ? 'move' : ''">
          {{ title }}
        </view>
      </view>
      <view slot="left" class="left-slot">
        <img
          class="bg-left"
          src="../img/1.png"
          alt=""
          hover-class="hover-bubble"
        />
        <img
          class="back-icon"
          src="../img/back-0.png"
          alt=""
          @tap="jumpPage"
          hover-class="hover-bubble"
        />

        <view class="other-btn">
          <live-other-btn
            class="other-btn"
            @other-btn="onOtherBtn"
          ></live-other-btn>
        </view>
      </view>
    </shopro-navbar>
  </view>
</template>
<script>
import liveOtherBtn from './live-other-btn.vue';
/** 自定义头部
 * @property {Object} back 指定 返回 某一页  path query
 * @property {String} title 页面标题
 */
export default {
  components: { liveOtherBtn },
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  props: {
    back: {
      type: Object,
      default: () => null,
    },
    title: {
      type: String,
      default: '一番赏',
    },
    initiallyId: {
      type: [String, Number],
      default: '',
    },
    boxId: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {};
  },
  // 计算属性 适配者模式
  computed: {
    max() {
      return this.title.length >= 15 ? true : false;
    },
    bg() {
      return {
        'background-image': `-webkit-linear-gradient(top, rgba(0,0,0,0.4), transparent);`,
      };
    },
  },
  // 数据监听
  watch: {},
  methods: {
    // 返回上一页
    jumpPage() {
      uni.navigateBack({
        delta: 1,
      });

      //重定向 到竖屏页
      // this.$Router.replace({
      //   path: '/pages/rewardGoods/portrait/index',
      //   query: {
      //     id: this.initiallyId,
      //     box_id: this.boxId,
      //   },
      // });

      // let pageList = getCurrentPages();
      // if (pageList.length > 1) {
      //   if (this.back) {
      //     this.$Router.push({
      //       path: this.back.path,
      //       query: this.back.query,
      //     });
      //   } else {
      //     uni.navigateBack({
      //       delta: 1,
      //     });
      //   }
      // } else {
      //   this.$Router.replaceAll('/pages/index/index');
      // }
    },
    //监听右上角自定义按钮
    onOtherBtn(ev) {
      this.$emit('otherBtn', ev);

      // switch (ev.name) {
      //   case 'look':
      //     this.getRules().then(() => {
      //       this.explainOpen = true;
      //     });
      //     break;
      //   case 'share':
      //     share.setShareInfo({
      //       title: this.details.ysf_name,
      //       desc: '',
      //       image: this.details.cover_image,
      //       params: {
      //         page: 5,
      //         pageId: this.initiallyId,
      //       },
      //     });

      //     this.showShare = true;
      //     break;
      //   case 'live':
      //     break;
      //   case 'up':
      //     let content = '';
      //     if (this.allSkip) {
      //       content = '是否需要开启抽奖动画';
      //     } else {
      //       content = '是否需要跳过抽奖动画';
      //     }
      //     uni.showModal({
      //       title: '抽奖动画',
      //       content,
      //       showCancel: true,
      //       cancelText: '取消',
      //       confirmText: '确定',
      //       success: (result) => {
      //         if (result.confirm) {
      //           this.changeAllSkip(!this.allSkip);
      //         }
      //       },
      //       fail: () => {},
      //       complete: () => {},
      //     });

      //     break;
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
.nav-custom {
  animation: fade 1s linear 0s 1 normal none;
}
.title-slot.more {
  font-size: 12rpx;
}
.title-slot {
  margin: 0 auto;
  padding: 0 10rpx;
  width: 94%;
  text-align: center;
  font-weight: 600;
  color: #fff;
  font-size: 14rpx;
  overflow: hidden;
  .title.move {
    animation: slide-in-bottom 7s linear 2s infinite alternate none;
  }
  .title {
    display: inline-block;
    max-width: none;
  }
}
.left-slot {
  position: relative;
  top: 2rpx;
  width: 28rpx;
  height: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .bg-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 28rpx;
    height: 28rpx;
  }
  .back-icon {
    width: 10rpx;
    height: 9rpx;
    transform: scale(1.7);
  }

  .other-btn {
    position: absolute;
    top: 16rpx;
    left: 0;
  }
}

@keyframes slide-in-bottom {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>
